<script lang="ts" setup>
import SearchIcon from "@/components/icon/SearchIcon.vue";
import DiscoverArticle from "@/components/discover/DiscoverArticle.vue";
import DiscoverList from "@/components/discover/DiscoverList.vue";
import DiscoverSpecial from "@/components/discover/DiscoverSpecial.vue";
import DiscoverSubtotal from "@/components/discover/DiscoverSubtotal.vue";
import DiscoverAuthor from "@/components/discover/DiscoverAuthor.vue";

import { ref } from "vue";
import { storeToRefs } from "pinia";
import { homeStoriesStore } from "@/store/index";

const store = homeStoriesStore();
const { isDiscoverShow } = storeToRefs(store);

let index = ref(2);

function changeIndex(id: number) {
  index.value = id;
}
</script>

<template>
  <div class=" bg-gray-50 h-screen overflow-auto">
    <div v-show="!isDiscoverShow" class="flex w-screen h-24 items-center p-5 text-2xl text-gray-400 bg-white">
      <div class=" discover-nav text-center">
        <div class="mx-5 w-20" :class="index == 1 ? 'active' : ''" @click="changeIndex(1)">阅读</div>
        <div class="mx-5 w-20" :class="index == 0 ? 'active' : ''" @click="changeIndex(0)">图文</div>
        <div class="mx-5 w-20" :class="index == 2 ? 'active' : ''" @click="changeIndex(2)">专题</div>
        <div class="mx-5 w-20" :class="index == 6 ? 'active' : ''" @click="changeIndex(6)">热榜</div>
        <div class="mx-5 w-20" :class="index == 3 ? 'active' : ''" @click="changeIndex(3)">问答</div>
        <div class="mx-5 w-20" :class="index == 4 ? 'active' : ''" @click="changeIndex(4)">音乐</div>
        <div class="mx-5 w-20" :class="index == 5 ? 'active' : ''" @click="changeIndex(5)">影视</div>
        <div class="mx-5 w-20" :class="index == 8 ? 'active' : ''" @click="changeIndex(8)">电台</div>
        <div class="mx-5 w-20" :class="index == 7 ? 'active' : ''" @click="changeIndex(7)">小记</div>
        <div class="mx-5 w-20" :class="index == 9 ? 'active' : ''" @click="changeIndex(9)">作者</div>
      </div>
      <SearchIcon class="ml-5" />
    </div>

    <transition-group name="fade">
      <DiscoverArticle :category="1" v-show="index === 1" :key="1" />
      <DiscoverArticle :category="0" v-show="!isDiscoverShow && index === 0" :key="0" />
      <DiscoverSpecial v-show="index === 2" :key="2" />
      <DiscoverList v-show="index === 6" :key="6" />
      <DiscoverArticle :category="3" v-show="index === 3" :key="3" />
      <DiscoverArticle :category="4" v-show="index === 4" :key="4" />
      <DiscoverArticle :category="5" v-show="index === 5" :key="5" />
      <DiscoverArticle :category="8" v-show="index === 8" :key="8" />
      <DiscoverSubtotal v-show="!isDiscoverShow && index === 7" :key="7" />
      <DiscoverAuthor v-show="!isDiscoverShow && index === 9" :key="9" />
    </transition-group>

    <router-view v-slot="{ Component, route }">
      <transition name="fade">
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </div>

</template>

<style>
.discover-nav {
  width: 95%;
  overflow: auto;
  white-space: nowrap;
}

.discover-nav div {
  display: inline-block;
}

.discover-nav .active {
  color: black;
  font-size: 16px;
  font-weight: bold;
}

.discover-nav::-webkit-scrollbar {
  display: none;
}
</style>
